<!DOCTYPE html>
<html>
<head>
    <!-- $("#userNameComment").html(data);-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Регистрация</title>
    
    <style>
        .comment{
            color:blue;
        }
    
    </style>
   <script src="jquery-2.1.1.min.js"> </script>
   	<script>
		$(document).ready(function(){
			$("input").focus(function(){
				$(this).css("background-color","lightgrey")
			})
			$("input").blur(function(){
				$(this).css("background-color","white")
			})
		})
	</script>
	
    <script type="text/javascript">
        var usernameIsFree = "Потребителското име е свободно";
        var usernameIsNotFree = "Потребителското име е заето"
         function checkUserName() {
           
              username = document.getElementById("login_name").value;
              $.get("UserCheck?name="+username, function(data){
                  if(data=='1'){
                     // console.log("value of data is"+data);
                     $("#login_name_comment").html(usernameIsFree);
                       
                   }else{
                      // console.log("value of data is "+data);
                      $("#login_name_comment").html(usernameIsNotFree);
                     
                   }
                });
             
          }
        
        
        function validateAndSubmit(){
            var warnings = false;

            
            var login_name = document.getElementById("login_name").value;
            if(!login_name){
                document.getElementById("login_name_comment").innerHTML="Въведете потребител"; 
                warnings = true;
            }else {
                checkUserName();
                var login_name_comment = document.getElementById("login_name_comment").innerHTML;
                  if(login_name_comment == usernameIsNotFree){
                       warnings = true;
                 }
                
            }
            var password = document.getElementById("password").value;
            if(!password){
                document.getElementById("password_comment").innerHTML = "Въведете парола";
                warnings=true;
            }
            var name = document.getElementById("name").value;
            if(!name){
                document.getElementById("name_comment").innerHTML = "Въведете име";    
                warnings=true;
            }
            
            var email = document.getElementById("email").value;
            if(!email){
                document.getElementById("email_comment").innerHTML = "Въведете поща";
                warnings=true;
            }
            var phone = document.getElementById("phone").value;
            if(!phone){
                document.getElementById("phone_comment").innerHTML = "Въведете номер"; 
                warnings=true;
            }
            
            var address1 = document.getElementById("address1").value;
            if(!address1){
                document.getElementById("address1_comment").innerHTML = "Въведете адрес"; 
                warnings=true;
            }
            
            var city = document.getElementById("city").value;
            if(!city){
                document.getElementById("city_comment").innerHTML = "Въведете град";  
                warnings=true;
            }
            
            var region = document.getElementById("region").value;
            if(!region){
                document.getElementById("region_comment").innerHTML = "Въведете област";  
                warnings=true;
            }
            
            var country = document.getElementById("country").value;
            if(!country){
                document.getElementById("country_comment").innerHTML = "Въведете държава";  
                warnings=true;
            }
            
            var address2 = document.getElementById("address2").value;
            var postCode = document.getElementById("postCode").value;
            var bulletin = document.getElementById("bulletin").value;
            var gender = document.getElementById("gender").value;
            
           
          //  console.log(warnings);
            if(warnings==false){
                $.post("Register",{login_name:login_name,password:password,name:name,
                    email:email,phone:phone,address1:address1,address2:address2,city:city,
                     region:region,country:country,postCode:postCode,bulletin:bulletin,
                     gender:gender},function(data){
							if(data == 'coincidence'){
								document.getElementById("comment").innerHTML="Случайно съвпадение на имена в последния момент. Моля, променете потребителското име."
								$("#login_name_comment").html(usernameIsNotFree);
							}else{
								window.location = data;
							}
						
                         });
               
            }
            
        }
        
        function eraseComment(id){
            document.getElementById(id).innerHTML="";
        }
    
    </script>
    
</head>
<body>

<div style="position: absolute; top: 2em; left: 35em;"> 

   <form autocomplete="off">
    <table style="border:solid">
		<tr>
		  <td> Потребителско име: </td>
		 <td><input id="login_name" type="text" name="login_name"  onchange="checkUserName()"></td>
         <td id="login_name_comment" class="comment">  </td>
        </tr>
		<tr>
            <td> Парола: </td>   
            <td> <input id="password" type="password" name="password"    onchange="eraseComment('password_comment')"></td>
            <td id="password_comment" class="comment"> </td>
        </tr>
		<tr>
            <td> Име: </td>
            <td> <input id="name" type="text" name="name"  onchange="eraseComment('name_comment')"></td>
            <td id="name_comment" class="comment"> </td>
        </tr>
		
		<tr> <td>Електронна поща: </td>
             <td> <input id="email" type="text" name="email"  onchange="eraseComment('email_comment')"> </td>
            <td id="email_comment" class="comment"></td>
        </tr>
		
        <tr>
            <td> Телефонен номер: </td>
            <td> <input id="phone" type="text" name="phone"  onchange="eraseComment('phone_comment')"></td>
            <td id="phone_comment" class="comment"> </td>
        </tr>
		<tr> <td>Пол: </td>
            <td> <select id="gender" name="gender">
                <option value="F">Жена</option>
			    <option value="M">Мъж</option>
		          </select>
            </td>
        </tr>
		
		<tr>
            <td> Адрес 1:  </td>
            <td> <input id="address1" type="text" name="address1"  onchange="eraseComment('address1_comment')"> </td>
            <td id="address1_comment" class="comment"> </td>
        </tr>
        <tr>
            <td> Адрес 2:  </td>
            <td> <input id="address2" type="text" name="address2" > </td>
        </tr>
        <tr>
            <td> Град: </td>    
            <td> <input id="city" type="text" name="city"  onchange="eraseComment('city_comment')"> </td>
            <td id="city_comment" class="comment"> </td>
        </tr>
		
		<tr>
            <td> Пощенски код: </td>
            <td> <input id="postCode" type="text" name="postCode" ></td>
        </tr>
		<tr>
            <td> Област: </td>
            <td><input  id="region" type="text" name="region"  onchange="eraseComment('region_comment')"></td>
            <td id="region_comment" class="comment"> </td>
        </tr>
		<tr>
            <td>Държава: </td>
            <td><input id="country" type="text" name="country" value ="България" readonly onchange="eraseComment('country_comment')">  </td>
            <td id="country_comment" class="comment"> </td>
        </tr>
		<tr>
            <td> Oферти по имейл: </td>    
            <td> <input id="bulletin" type="checkbox" name="bulletin"> </td>
        </tr>
		<tr> 
            <td><button  type="button" onclick="validateAndSubmit()"> Регистрация </button> </td>  
        </tr>
		
    </table>
       
</form>
         <p id = "comment" style="position:absolute; left:1px; color:blue">  </p> 
</div>
</body>
</html>